<template>
  <div>
    <div style="height: 4.5rem"></div>
    <a-row>
      <a-col :span="6">
        <div id="myChart" class='echarts_back'></div>
      </a-col>
      <a-col :span="6">
        <div id="pie" class='echarts_back'></div>
      </a-col>
      <a-col :span="6">
        <div class='echarts_back'>
          <div style="margin-bottom: 10px">设备维保倒计时</div>
          <MaintenanceCountdown/>
        </div>
      </a-col>
      <a-col :span="6">
        <div class='echarts_back'>
          <AutoBar ref="auto_bar"/>
        </div>
      </a-col>
    </a-row>
<!--    <el-row>-->
<!--      <el-col :span="6">-->
<!--        <div id="myChart" class='echarts_back'></div>-->
<!--      </el-col>-->
<!--      <el-col :span="6">-->
<!--        <div id="pie" class='echarts_back'></div>-->
<!--      </el-col>-->
<!--      <el-col :span="6">-->
<!--        <div class='echarts_back'>-->
<!--          <div style="margin-bottom: 10px">设备维保倒计时</div>-->
<!--          <MaintenanceCountdown />-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :span="6">-->
<!--        <div class='echarts_back'>-->
<!--          <AutoBar ref="auto_bar"/>-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->

<!--    <div style="width: 40rem;padding: 10px">-->
<!--      <MapComponent ref="map"/>-->
<!--    </div>-->
  </div>
</template>
<script>
import MapComponent from "./echart_components/map_component"
import AutoBar from "./echart_components/auto_bar"
// import ProcessComponent from "./echart_components/process_component"
import MaintenanceCountdown from "@/components/MaintenanceCountdown";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  mounted() {

    //加这行代码，没错！
    // this.bar_qie();
    this.init_line();
    //
    this.pie_option_init();

    this.$refs.map.init();

    this.$refs.auto_bar.back_option()

  },
  methods: {
    //初始化折线图
    init_line() {
      // //this.$root => app
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "总用户量",
          x: 'center',
          y: '7px',
          textStyle: {
            // width:200
            color: '#3A7BD5',
          },
          textAlign: 'auto',
          // left:100,
          // subtext:'总用户量',
          subtextStyle: {
            align: 'center',
            // verticalAlign:'middle'
          }
        },
        tooltip: {},
        xAxis: {
          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
          splitLine: {
            show: false
          }
        },
        grid: {
          left: 26,
          right: 0,
          bottom: 20,
          top: 20,
        },
        yAxis: {
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: "用户量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    pie_option_init() {
      let myChart = this.$echarts.init(document.getElementById("pie"));

      myChart.setOption(this.pie_option())
    },
    //pie option  饼图
    pie_option() {
      return {
        title: {
          text: '设备状态分布统计',
          subtext: '',
          left: 'center',
          textStyle: {
            // width:200
            color: '#3A7BD5',
          },
        },
        tooltip: {
          trigger: 'item'
        },
        //右侧统计图表
        legend: {
          show: false,
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1048, name: '工作：' + 1048},
              {value: 735, name: '关机：' + 735},
              {value: 580, name: '异常：' + 580},
              {value: 484, name: '待机：' + 484},
              // {value: 300, name: '视频广告'+1048}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 1)'
              }
            }
          }
        ]
      };
    },
    bar_qie() {
      var _this = this;
      // 初始化echart
      var chart = this.$echarts.init(document.getElementById("myChart1"));

      // 各状态的颜色
      var colors = ["#2f4554", "#61a0a8", "#d48265", "#c23531"];

      // 四种状态
      var state = ["正常", "繁忙", "故障", "离线"];

      // echart配置
      var opt = {
        color: colors,
        tooltip: {
          formatter: function (params) {
            return params.name + ":" + params.value[1] + "~" + params.value[2];
          },
        },
        legend: {
          data: state,
          bottom: "1%",
          selectedMode: false, // 图例设为不可点击
          textStyle: {
            color: "#000",
          },
        },
        grid: {
          left: "3%",
          right: "3%",
          top: "1%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          min: 0, // x轴零刻度对应的实际值
        },
        yAxis: {
          data: ["WAN0", "WAN1"],
        },
        series: [
          // 用空bar来显示四个图例
          {name: state[0], type: "bar", data: []},
          {name: state[1], type: "bar", data: []},
          {name: state[2], type: "bar", data: []},
          {name: state[3], type: "bar", data: []},
          {
            type: "custom",
            renderItem: function (params, api) {
              var categoryIndex = api.value(0);
              var start = api.coord([api.value(1), categoryIndex]);
              var end = api.coord([api.value(2), categoryIndex]);
              var height = 24;

              return {
                type: "rect",
                shape: _this.$echarts.graphic.clipRectByRect(
                    {
                      x: start[0],
                      y: start[1] - height / 2,
                      width: end[0] - start[0],
                      height: height,
                    },
                    {
                      x: params.coordSys.x,
                      y: params.coordSys.y,
                      width: params.coordSys.width,
                      height: params.coordSys.height,
                    }
                ),
                style: api.style(),
              };
            },
            encode: {
              x: [1, 2],
              y: 0,
            },
            data: [
              {
                itemStyle: {normal: {color: colors[0]}},
                name: "正常",
                value: [0, 0, 24],
              },
              {
                itemStyle: {normal: {color: colors[1]}},
                name: "繁忙",
                value: [0, 24, 25],
              },
              {
                itemStyle: {normal: {color: colors[2]}},
                name: "故障",
                value: [0, 25, 45],
              },
              {
                itemStyle: {normal: {color: colors[3]}},
                name: "离线",
                value: [0, 45, 1000],
              },
              {
                itemStyle: {normal: {color: colors[0]}},
                name: "正常",
                value: [1, 0, 15],
              },
              {
                itemStyle: {normal: {color: colors[1]}},
                name: "繁忙",
                value: [1, 15, 20],
              },
              {
                itemStyle: {normal: {color: colors[2]}},
                name: "故障",
                value: [1, 20, 35],
              },
              {
                itemStyle: {normal: {color: colors[3]}},
                name: "离线",
                value: [1, 35, 40],
              },
              {
                itemStyle: {normal: {color: colors[0]}},
                name: "正常",
                value: [1, 40, 45],
              },
              {
                itemStyle: {normal: {color: colors[3]}},
                name: "离线",
                value: [1, 45, 1000],
              },
            ],
          },
        ],
      };
      chart.setOption(opt);
      window.onresize = chart.resize;   //加这行代码，没错！
    },
  },
  components: {
    MapComponent,
    AutoBar,
    //进度条
    // ProcessComponent
    MaintenanceCountdown

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#myChart {
  //background-color: white;
  border-radius: 5px;
}

#myChart1 {
  background-color: white;
  border-radius: 5px;
}
</style>
